import React from "react";
import { NavLink, useLocation } from "react-router-dom";

const Index = () => {
  const { pathname } = useLocation();
  return (
    <div style={{ height: 50 }} className="tabbar">
      <div
        style={{
          position: "fixed",
          left: 0,
          bottom: 0,
          width: "100%",
          height: 50,
          display: "flex",
          justifyContent: "space-around",
          alignItems: "center",
          borderTop: "1px solid #ccc",
					backgroundColor: '#fff'
        }}
      >
        <NavLink to="/" className={pathname === "/" ? "active" : ""}>
          首页
        </NavLink>
        <NavLink to="/files" className={pathname === "/files" ? "active" : ""}>
          文件
        </NavLink>
        <NavLink to="/my" className={pathname === "/my" ? "active" : ""}>
          我的
        </NavLink>
      </div>
    </div>
  );
};

export default Index;
